<template>
    <div class="conn">
        <el-form ref="form" label-position="left" status-icon :rules="rules" :model="form" label-width="100px">
            <div>
                <el-form-item label="病历号:" prop="caseNumber">
                    <el-input :readonly="true" v-model.number="form.caseNumber"></el-input>
                </el-form-item>

            </div>
            <div>
                <el-form-item label="预约日期:" prop="visitDate">
                    <el-date-picker
                            v-model="form.visitDate"
                            align="right"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="时间段:" required>
                    <el-time-select
                            placeholder="起始时间"
                            v-model="startTime"
                            :picker-options="{
                              start: '08:30',
                              step: '00:15',
                              end: '18:30'
                            }">
                    </el-time-select>
                    &nbsp;<span class="h">—</span>
                    <el-time-select
                            placeholder="结束时间"
                            v-model="endTime"
                            :picker-options="{
                              start: '08:30',
                              step: '00:15',
                              end: '18:30',
                              minTime: startTime
                            }">
                    </el-time-select>
                </el-form-item>
            </div>

            <div>
                <el-form-item label="挂号级别:" prop="registLeID">
                    <el-select v-model="form.registLeID" placeholder="请选择">
                        <el-option v-for="(item,index) of types" :key="index" :label="item.val"
                                   :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="挂号科室:" prop="deptID">
                    <el-select v-model="form.deptID" filterable placeholder="请选择科室">
                        <el-option v-for="(item,index) of options2" :key="index" :label="item.deptName"
                                   :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="reduce" prop="CodeName">
                    <el-select v-model="CodeName" placeholder="请选择医生">
                        <el-option v-for="(item,index) of CodeNmaes" :key="index" :label="item"
                                   :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </div>

            <el-divider></el-divider>


            <div>
                <el-form-item label="姓名:" prop="realName">
                    <el-input v-model="form.realName"></el-input>
                </el-form-item>
                <el-form-item label="性别:" prop="gender">
                    <el-select v-model="form.gender" placeholder="请选择">
                        <el-option v-for="(item,index) of genders" :key="index" :label="item.val"
                                   :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出生日期:" prop="birthDate">
                    <el-date-picker @change="cons"
                                    v-model="form.birthDate"
                                    type="date"
                                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </div>
            <div>

                <el-form-item label="身份证号:" prop="IDnumber">
                    <el-input v-model="form.IDnumber"></el-input>
                </el-form-item>


                <el-form-item label="结算类别:" prop="settleID">
                    <el-select v-model="form.settleID" placeholder="请选择">
                        <el-option v-for="(item,index) of levels" :key="index" :label="item.val"
                                   :value="item.code"></el-option>
                    </el-select>
                </el-form-item>

            </div>
            <div>
                <el-form-item label="年龄:" prop="age">
                    <el-input v-model.number="form.age"></el-input>
                </el-form-item>
                <select class="selectBox" v-model="form.ageType">
                    <option value="岁">岁</option>
                    <option value="月">月</option>
                    <option value="天">天</option>

                </select>
            </div>
            <div>
                <el-form-item label="地址:" prop="homeAddress">
                    <el-input class="incr" v-model.number="form.homeAddress"></el-input>
                </el-form-item>
            </div>

            <el-form-item label="">
                <el-button type="primary" @click="submitForm('form')">立即修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {HOST} from "../../config/HOST"

    export default {
        name: "register_del",
        data() {
            return {
                visitstate: 1,
                registerid: '',
                startTime: '08:30',
                endTime: '08:30',
                form: {
                    isBook: '1',//是否要病历本（默认要）
                    ageType: '岁',//年龄类别
                    noon: '',//午别
                    visitState: 1,//看诊状态
                    registerID: '10001',//挂号员ID
                    registTime: new Date(),//挂号时间
                    registLeID: '',//挂号级别
                    deptID: '',//挂号科室
                    userID: '',//医生代码
                    caseNumber: '',//病历号
                    visitDate: new Date(),//挂号日期
                    birthDate: new Date(),
                    realName: '',
                    age: '',
                    IDnumber: '',
                    gender: '',
                    homeAddress: '',
                    settleID: '',
                },
                data: {
                    code: [1, 2, 3],
                    name: ['a', 'b', 'c']
                },
                CodeNmaes: [],
                CodeName: '',
                types: [
                    {
                        code: 1,
                        val: '普通'
                    },
                    {
                        code: 2,
                        val: '专家'
                    }
                ],
                levels: [
                    {
                        code: 1,
                        val: '自费'
                    },
                    {
                        code: 2,
                        val: '市医保'
                    }
                ],
                genders: [
                    {
                        code: 71,
                        val: '男'
                    },
                    {
                        code: 72,
                        val: '女'
                    }
                ],
                //科室的名称下拉框选项
                options2: [
                    {
                        code: 1,
                        name: '妇产科'
                    },
                    {
                        code: 2,
                        name: '牙科'
                    },
                    {
                        code: 3,
                        name: '泌尿科'
                    }],
                rules: {
                    visitDate: [
                        {required: true, message: '请选择挂号科室', trigger: 'change'}
                    ],
                    settleID: [
                        {required: true, message: '请选择结算类别', trigger: 'change'}
                    ],
                    deptID: [
                        {required: true, message: '请选择挂号科室', trigger: 'change'}
                    ],
                    gender: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ],
                    birthDate: [
                        {required: true, message: '请填写', trigger: 'change'}
                    ],
                    registLeID: [
                        {required: true, message: '请选择挂号级别', trigger: 'change'}
                    ],
                    homeAddress: [
                        {required: true, message: '请填写具体地址', trigger: 'blur'}
                    ],
                    realName: [
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    IDnumber: [
                        {required: true, message: '请填写身份证号', trigger: 'blur'},
                        { pattern:/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,message: '请正确填写！',trigger: 'blur' }
                    ],
                    age: [
                        {
                            required: true, message: '请输入年龄', trigger: 'blur'
                        },
                        {
                            type: 'number', message: '必须为数字'
                        }
                    ]
                }
            }
        },
        created() {
            this.$ajax.get(`${HOST}dept/all`).then((res) => {
                this.options2 = res.data
            })
            this.$ajax.get(`http://localhost:8082/queryById/${this.$route.params.id}`).then((res) => {
                this.form = res.data;
                for (let i = 0; i < this.data.code.length; i++) {
                    this.CodeNmaes[i] = this.data.code[i] + "-" + this.data.name[i];
                    if (this.form.userID == this.data.code[i]) {
                        this.CodeName = this.CodeNmaes[i]
                    }
                }

            })

        },
        computed: {},
        watch: {
            'CodeName'() {
                let code = this.CodeName.split("-")[0];
                this.form.userID = code;
                // eslint-disable-next-line no-console
                console.log(code)
            }
        },
        methods: {
            cons() {
                //一天毫秒数：86400000
                //一月毫秒数：2592000000
                //一年毫秒数：31104000000
                let d = this.form.birthDate
                let da = new Date()
                let data = da - d;
                if (data <= 0) {
                    this.$message("请正确填写！！")
                    this.form.age = ''
                } else {
                    if (data / 31104000000 > 1) {
                        this.form.age = Math.floor(data / 31104000000)
                        this.form.ageType = '岁'
                    } else {
                        if (data / 2592000000 > 1) {
                            this.form.age = Math.floor(data / 2592000000)
                            this.form.ageType = '月'
                        } else {
                            this.form.age = Math.floor(data / 86400000)
                            this.form.ageType = '天'
                        }
                    }
                }
            },
            submitForm(formName) {
                this.setNoon()
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$ajax.post("http://localhost:8082/update", this.form).then((res) => {
                            if (res.data == "success") {
                                this.$message({
                                    type: "success",
                                    message: "添加成功"
                                })
                            } else {
                                this.$message({
                                    type: "danger",
                                    message: "添加失败"
                                })
                            }

                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: "添加失败"
                        })
                        return false;
                    }
                });
            },
            setNoon() {
                let t = this.endTime;
                let f = parseInt(t.split(":")[0]);
                if (f > 12) this.form.noon = "下午"
                else this.form.noon = "上午"
            }
        }
    }
</script>

<style scoped>
    img {
        width: 100px;
    }

    .el-form-item {
        display: inline-block;
    }

    .el-form-item:nth-of-type(2), .el-form-item:nth-of-type(3) {
        margin-left: 20px;
    }

    .h {
        display: inline-block;
        text-align: center;
        padding-right: 10px;
        color: #DCDFE6;
    }

    .conn {
        padding: 20px 100px;
    }

    .reduce {
        margin-left: 0 !important;
        position: relative;
        left: -67px;
    }

    .selectBox {
        height: 40px;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        position: relative;
        right: 39px;
    }

    .incr {
        width: 630px;
    }
</style>